<template>
  <div class="home-container">
    <!-- 首页内容 -->
    <Carousel ref="carousel" />

    <template v-for="value in homeLayout" :key="value.id">
      <!-- 精选推荐 -->
      <FeaturedGames v-if="value.styleTemplate === 1" :title="value.title" :layouts="value.games" :hashMore="value.hashMore" :contentId="value.contentId" />
      <!-- 热门游戏 -->
      <HotGames v-if="value.styleTemplate === 2" :title="value.title" :layouts="value.games" :hashMore="value.hashMore" :contentId="value.contentId" />
    </template>
    <!-- 排行榜 -->
    <Ranking />
  </div>
</template>

<script setup>
import Carousel from './Carousel/Index.vue'
import FeaturedGames from './FeaturedGames/Index.vue'
import HotGames from './HotGames/Index.vue'
import Ranking from './Ranking/Index.vue'
import { ref, onMounted } from 'vue'
const carousel = ref(null)
import { getBanner, getHomeLayout, getGameNew, getWeekHot, getFreeAccount } from '@/api';

const homeLayout = ref()

onMounted(() => {
  let params = {
    page: 1,
    pageSize: 10,
  }
  getHomeLayout(params).then(res => {
    console.log("获取首页布局:", res);
    homeLayout.value = res.layouts
  })
})
</script>

<style scoped>
/* 为样式添加 scoped 属性，避免样式污染 */
</style>
